<template>
  <el-container>
      main
  </el-container>
</template>

<style>
  .container{

      border: 1px solid #eee;
      width:100%;
      height:100%;
  }


  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  
  .el-aside {
    color: #333;
  }
</style>

<script>
  export default {
    data() {
      
      return {
        tableData:[],
        filterData:[],
        dialogVisible:false,
        selectRow:null,
        isedit:false,
        buttontitle:'',
        form:{
            name:'',
            region:'',
            date:null,
            id:-1
        },
        item : {
          date:  Date.now(),
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        pager:{
            pagesize:5,
            currentpage:1
            
        }
      }
    },
    mounted(){

        for(let i=1;i<=10;i++)
        {
            const a=Object.assign({id:i},this.item)
            this.tableData.push(a)
        }
        this.handlerShowData(this.pager.currentpage)
    }
    ,
    methods:{
        handlerAdd() {
       
            this.selectRow=null
            this.dialogVisible=true
            this.form.name=''
            this.form.address=''
            this.form.date=Date.now()
            this.form.id=this.tableData[this.tableData.length-1].id+1
            this.buttontitle='保存'            
        },
        handlerEdit(row) {
            this.selectRow=row
            this.dialogVisible=true
            this.form.name=row.name
            this.form.address=row.address
            this.form.date=row.date
            this.form.id=row.id
            this.buttontitle='更新'
        },    
        handlerDelete(row){

            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {

              const _this=this
              this.tableData.forEach(function(item,index){
                if(item.id === row.id){
                  _this.tableData.splice(index,1)
                  _this.handlerShowData(_this.pager.currentpage)
                  _this.$message({
                    type: 'success',
                    message: '删除成功!'
                  });
                }
              })
            
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });          
            });


        },
        onSubmit(){

          if(this.isedit===true) {
            let _this=this
            this.tableData.forEach(function(item){
              if(item.id === _this.form.id){
            
                item.name=_this.form.name
                item.address=_this.form.address
                item.date=_this.form.date
              }
            })
          } else {

            const item=Object.assign({},this.form)
            this.tableData.push(item)
            const pagelength=this.getPageLength()
            if(pagelength>this.pager.currentpage) {
              this.handlerShowData(pagelength)
              this.pager.currentpage=pagelength
            } else {
              this.handlerShowData(this.pager.currentpage)
            }
          }
          this.dialogVisible=false

        },
        dateFormat(row, column) { 
           var date = row[column.property]; 
            if (date == undefined) { 
                return ""; 
            } 
            return this.$moment(date).format("YYYY-MM-DD"); 
        } 
        ,
        handlerShowData(currentpage){
            let page=currentpage
            const pagelength=this.getPageLength()
            console.log('pagelength'+pagelength+'currentpage'+currentpage)
            if(pagelength<currentpage) {
              page=pagelength
            } else {
              page=currentpage
            }
            const start=(page-1)*5
            const end=(page)*5
            this.filterData= this.tableData.filter((item,index) => {
               return index>=start && index<end    
            })
        }
        ,
        PageChange(val){
          this.handlerShowData(val)
        }
        ,
        getPageLength(){
          const pagelength= Math.ceil(this.tableData.length/this.pager.pagesize)
          return pagelength 
        }
    }
  };
</script>